import React, { Component } from "react";
import { Affix, Spin, Button, Icon } from "antd";
import CommonCard from "./common-card";
import { messages } from "share/common";
import menuRoute from "routes/menuRoute";
import debounce from "lodash.debounce";
import emptyImg from "images/enterprise-manage/empty.png";
import emptySearchImg from "images/enterprise-manage/empty_search.png";

class CompanyComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      companiesData: [],
      companiesLoading: false,
      activeId: "",
    };
    this.infoList = [
      {
        name: messages("basic-5.key168") /*公司编码*/,
        key: "companyCode",
      },
    ];
    this.onSelect = debounce(this.onSelect, 300);
  }

  componentWillMount() {}

  componentDidMount() {
    const { onRef } = this.props;
    onRef && onRef(this);
  }

  componentWillReceiveProps(nextProps) {}

  componentWillUnmount() {}

  setActiveId = () => {
    this.setState({ activeId: "" });
  };

  onItemClick = (item) => {
    const { activeId } = this.state;
    this.setState({ activeId: activeId === item.id ? "" : item.id }, () => {
      if (activeId === item.id) {
        this.onSelect();
      } else {
        this.onSelect(item);
      }
    });
  };

  onSelect = (item) => {
    const { onSelect } = this.props;
    onSelect && onSelect("companyId", item);
  };

  onItemEdit = (item) => {
    const { onEdit } = this.props;
    onEdit && onEdit("edit-company", { id: item.id });
  };

  onItemView = (item) => {
    const { onView } = this.props;
    onView && onView("view-company", { id: item.id, titleName: item.name });
  };

  //添加扩展字段
  handleAddExtendFiled = () => {
    this.context.router.push(menuRoute.getPageUrlByKey("company-extend-filed"));
  };

  setMoreLoading = (moreLoading) => {
    const { onGetMore } = this.props;
    if (moreLoading) {
      onGetMore && onGetMore("COMPANY");
    }
    this.setState({ moreLoading });
  };

  render() {
    const {
      data = [],
      loading = false,
      allActive,
      keyword,
      showCompanyGroup = false,
      hide = false,
      noDataFromBooks,
    } = this.props;
    const { activeId, moreLoading } = this.state;
    return (
      <div className="right-company">
        {!hide && (
          <Affix
            offsetTop={0}
            target={() => {
              return document.querySelector(".right-company");
            }}
          >
            <div className={"set-of-books-company-title right-title-box"}>
              <div className="title-and-count-box">
                <div className={"set-of-books-company-title"}>{messages("basic-5.key1") /*公司*/}</div>
                <div className={"set-of-books-company-tip"}>
                  {messages("basic-5.key975", { arg1: data.totalElements || "-" }) /*共{arg1}条*/}
                </div>
              </div>
              <div className="btn-box">
                {showCompanyGroup && (
                  <Button onClick={this.props.onGoToCompanyGroup}>{messages("basic-5.key822") /*公司组*/}</Button>
                )}
                <Button onClick={this.handleAddExtendFiled}>{messages("basic-5.key191") /*公司扩展字段*/}</Button>
              </div>
            </div>
          </Affix>
        )}
        {!hide && (
          <Spin spinning={loading}>
            <div className="common-scroll-area">
              {data &&
                data.content.map((item) => {
                  return (
                    <CommonCard
                      keyword={keyword}
                      needInfoHighLight
                      onlyLeft
                      control
                      propActive={allActive ? true : item.id === activeId}
                      onItemClick={this.onItemClick}
                      // onItemEdit={this.onItemEdit}
                      onItemView={this.onItemView}
                      titleKey={"name"}
                      singleItem={item}
                      infoList={this.infoList}
                      key={item.id}
                      statusKey={"enabled"}
                    />
                  );
                })}
              {data && data.content && data.content.length > 0 && (
                <div
                  onClick={() => {
                    if (data.totalElements > data.content.length) {
                      this.setMoreLoading(true);
                    }
                  }}
                  className={`load-more-text ${data.totalElements > data.content.length ? "hover" : ""}`}
                >
                  {moreLoading ? (
                    <Icon type="loading" />
                  ) : data.totalElements > data.content.length ? (
                    messages("basic-5.key948") /*加载更多*/
                  ) : (
                    messages("common.no.more") /*没有更多了*/
                  )}
                </div>
              )}
              {data && data.totalElements === 0 && (
                <div className="empty-content">
                  <div className="img-box">
                    <img src={keyword ? emptySearchImg : emptyImg} className="img" />
                  </div>
                  <div className={`load-more-text`}>
                    {
                      keyword
                        ? messages("basic-5.key976") /*未搜索到公司*/
                        : noDataFromBooks
                        ? messages("basic-5.key977") /*该账套下暂无公司*/
                        : messages("basic-5.key978") /*该法人实体下暂无公司*/
                    }
                  </div>
                </div>
              )}
            </div>
          </Spin>
        )}
      </div>
    );
  }
}

CompanyComp.contextTypes = {
  router: React.PropTypes.object,
};

CompanyComp.propTypes = {};

export default CompanyComp;
